<template>
	<view class="container">
		<!-- 提交加载 开始-->
		<u-loading-page :loading="pageLoading" loading-mode="spinner" loading-color="#FFFFFF" icon-size="36" font-size="12" color="#FFFFFF" loading-text="Loading···" bg-color="#00000050"></u-loading-page>
		<!-- 提交加载 结束-->
		<view class="heardTitle">
			<text>我的学习</text>
		</view>
		<view class="main">
			<view v-for="(item,index) in titleList" :key="index">
				<view class="mainCase">
					<view class="mainCase-title">
						<text class="codeBtn">{{item.semName===null?'--':item.semName}}</text>
					</view>
					<view class="mainCase-info">
						<view class="mainCase-biaoqian">
							<view :class="item.learnStatusName==='学习中'?'mainCase-biaoqian1':item.learnStatusName==='未开始'?'mainCase-biaoqian2':'mainCase-biaoqian3'">
								<text>{{item.learnStatusName}}</text>
							</view>
						</view>
						<view class="mainCase-info-biaoti">
							{{item.clsName}}
						</view>
						<view class="mainCase-info-jindu">
							学习进度：
							<u-line-progress :percentage="item.learnProgress===0?(item.learnedCrsCnt/item.totalCrsCnt)*100:item.learnProgress===-1?'0':'100'" height="8" activeColor="#FFB607"></u-line-progress>
						</view>
						<view class="mainCase-info-shuoming">
							此班级共{{item.totalCrsCnt}}次课，已完成{{item.learnedCrsCnt}}次课学习
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { queryClsNoStage } from './api/index.js';
	export default {
		data() {
			return {
				pageLoading:false,
				csdeState: false,
				phoneNum: '',
				mima: '',
				titleList:[]
			}
		},
		/**
		 * 页面加载时触发
		 * 一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数
		 */
		onReady(options) {
			this.stageList()
		},
		methods: {
			//查询阶段岛屿下的班级
			stageList(){
				queryClsNoStage().then(response => {
				  console.log(response,'班级')
				  if (response.code === 0) {
					  this.titleList = response.data
					// this.data.case=response.data
				  }else{
					 uni.$u.toast(response.msg) 
				  }
				}).catch(errors => {
				  // uni.$u.toast(errors)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/static/styles/variables.scss";

	.container {
		position: relative;
		background-color: #F0F0F0;
		height: 100vh;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.heardTitle{
		width: 650rpx;
		height: 100rpx;
		background: #FFB607;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: 10%;
		text-align: center;
		font-weight: bold;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 60rpx;
	}
	.main {
		width: 650rpx;
		height: 70%;
		overflow-y: auto;
		background: #FFFFFF;
		border-radius: 40rpx;
		margin-top: -40rpx;
		margin-bottom: 30rpx;
	}
	.mainCase{
		padding: 40rpx;
	}
	.mainCase-title{
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 31rpx;
		margin-bottom: 20rpx;
		padding-left: 30rpx;
	}
	.mainCase-info{
		height: 200rpx;
		width: 580rpx;
		padding: 30rpx;
		background-image: url(#{$bgImageUrl}/assets/wdxxbg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.mainCase-biaoqian{
		display: flex;
		justify-content: flex-end;
		margin-top: -30rpx;
	}
	.mainCase-biaoqian1{
		width: 90rpx;
		height: 30rpx;
		background: #3CAB7E;
		border-radius: 15rpx;
		text-align: center;
		
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: normal;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 31rpx;
	}
	.mainCase-biaoqian2{
		width: 90rpx;
		height: 30rpx;
		background: #FF8106;
		border-radius: 15rpx;
		text-align: center;
		
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: normal;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 31rpx;
	}
	.mainCase-biaoqian3{
		width: 90rpx;
		height: 30rpx;
		background: #808080;
		border-radius: 15rpx;
		text-align: center;
		
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: normal;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 31rpx;
	}
	.mainCase-info-biaoti{
		width: 220rpx;
		height: 40rpx;
		background: #FFB607;
		border-radius: 20rpx;
		text-align: center;
		margin-bottom: 10rpx;
		
		font-weight: bold;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 40rpx;
	}
	.mainCase-info-jindu{
		padding-left: 10rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #333333;
		line-height: 31rpx;
	}
	.mainCase-info-shuoming{
		margin-top: 10rpx;
		padding-left: 10rpx;
		font-weight: normal;
		font-size: 18rpx;
		color: #333333;
		line-height: 31rpx;
	}
</style>